export default {
  props: {
    /**
     * 数据结构：{id:String, name:String} 或 [{id:String, name:String}, ...]
     */
    value: [Object, Array],
    /**
     * 数据结构：{dataUrl:String, queryParams:Object, casField:String, title:String}
     * dataUrl:查询级联数据的远程接口，每组数据有独立的查询接口；
     * queryParams: 查询级联数据时的参数，每组级联数据来自不同的表，查询条件是不一样的；
     * casField: 级联字段，关联到前一组数据，查询当前组的级联数据时需要以前一组级联数据的选中值作为查询条件，该字段即为条件字段；
     * title: 级联数据独立的标题；
     */
    panel1: {
      type: Object,
      default: () => {
        return {
          dataUrl: '',
          queryParams: {},
          casField: '',
          title: '',
          emptyText: '',
        }
      }
    },
    panel2: {
      type: Object,
      default: () => {
        return {
          dataUrl: '',
          queryParams: {},
          casField: '',
          title: '',
          emptyText: '',
        }
      }
    },
    /**
     * TODO: 是否将两级数据作为树结构返回？即第一级数据为根节点，第二级数据为子节点。
     * 目前默认为 false，即只返回第二级数据，用来选人。
     */
    treeResult: Boolean,
    multiple: Boolean, // 是否支持多选？只对最后一级生效，前面几级只能单选。
    maxTagCount: Number, // 用于多选的情况，
    height: {
      type: Number,
      default: 400
    },
    width: {
      type: Number,
      default: 600
    }
  },
  data() {
    return {
      panel1Params: null,
      panel2Params: null, // 查询后台接口时所需的参数。
      resultKeys: [], // Number|String|Array：右面板当前选中的数据值——即数据KEY或KEY数组
      resultRows: [] // Object|Array：右侧面板当前选中的数据行——即数据对象或对象数组，{id:String, name:String}
    }
  },
  computed: {
  },
  mounted() {
    this.init()
  },
  watch: {
    value() {
      this.init()
    },
  },
  methods: {
    init() {
      this.initValue()
      this.initPanel1()
      this.initPanel2()
    },
    initValue() {
      this.resultKeys = []
      this.resultRows = []
      if (this.multiple) {
        this.value.forEach(item => {
          this.resultKeys.push(item.id)
          this.resultRows.push(item)
        })
      } else {
        if (this.value && this.value.id) {
          this.resultKeys.push(this.value.id)
          this.resultRows.push(this.value)
        }
      }
    },
    initPanel1() {
      let params = {}
      if (this.panel1.queryParams) {
        for (let key in this.panel1.queryParams) {
          params[key] = this.panel1.queryParams[key]
        }
      }
      this.panel1Params = params
    },
    initPanel2(extParams) {
      let params = {}
      if (this.panel2.casField) {
        params[this.panel2.casField] = '-1'
      }
      if (this.panel2.queryParams) {
        for (let key in this.panel2.queryParams) {
          params[key] = this.panel2.queryParams[key]
        }
      }
      if (extParams) {
        for (let key in extParams) {
          params[key] = extParams[key]
        }
      }
      this.panel2Params = params
    },
    doPanel1NodeClick(data) {
      // 准备刷新Panel2数据
      let casParams = {}
      casParams[this.panel2.casField] = data.id
      this.initPanel2(casParams)
    },
    doPanel2RadioChange(data) {
      // console.log('doPanel2RadioChange: %s, %s', data.id, checked)
      this.resultKeys = [data.id]
      this.resultRows = [data]
    },
    doPanel2CheckChange(data, checked) {
      // console.log('doPanel2CheckChange: %s, %s', JSON.stringify(data), checked)
      if (checked) {
        let existed = false
        this.resultRows.forEach(row => {
          if (row.id === data.id) {
            existed = true
          }
        })
        if (!existed) {
          this.resultKeys.push(data.id)
          this.resultRows.push(data)
        }
      } else {
        this.doRemove(data.id)
      }
    },
    doPanel2Check(datas, checked) {
      // console.log('doPanel2Check: ', JSON.stringify(datas))
      if (checked) {
        datas.forEach(data => {
          let existed = false
          this.resultRows.forEach(row => {
            if (row.id === data.id) {
              existed = true
            }
          })
          if (!existed) {
            this.resultKeys.push(data.id)
            this.resultRows.push(data)
          }
        })
      } else {
        datas.forEach(data => {
          this.doRemove(data.id)
        })
      }
    },
    doRemove(id) {
      let index = -1
      this.resultRows.forEach((row, idx) => {
        if (row.id === id) {
          index = idx
        }
      })
      if (index >= 0) {
        this.resultKeys.splice(index, 1)
        this.resultRows.splice(index, 1)
      }
    },
    doReset () {
      this.init()
    },
    doClear () {
      this.resultKeys = []
      this.resultRows = []
    },
    doConfirm() {
      this.$emit('onConfirm', this.resultRows, this.resultKeys)
    },
    doCancel() {
      this.$emit('onCancel')
    },
  }
}